<script setup>
import {ElMessage} from 'element-plus';
import {nextTick, reactive, ref, unref} from 'vue'
import api from "@/api";

const dialogFormVisible = ref(false)
const emit = defineEmits(['on-created', 'on-updated']);
const title = ref('')
const actionType = ref('')
const ruleFormRef = ref();
const ruleForm = ref({
  templateName: '',
  bizTypeCode: '',
  bizTypeName: '',
  id: null
})
const rules = reactive({
  templateName: [
    {
      required: true,
      message: '请输入模板名称',
      trigger: 'blur',
    },
  ],
  bizTypeCode: [
    {
      required: true,
      message: '请选择业务类型',
      trigger: 'change',
    },
  ],
});
const TypeOptions = ref([])
const initDialog = (type, row) => {
  getAllType()
  actionType.value = type
  if (type === 'add') {
    title.value = '新增'
  }
  if (type === 'edit') {
    title.value = '编辑'
    ruleForm.value.templateName = row.templateName
    ruleForm.value.bizTypeCode = row.bizTypeCode
    ruleForm.value.bizTypeName = row.bizTypeName
    ruleForm.value.id = row.id
  }
  dialogFormVisible.value = true
}
const getAllType = () => {
  const params = {pageNum: 1, pageSize: 5000}
  api.reimbursement.getBizTypeList(params).then((res) => {
    TypeOptions.value = res.list || []
  })
}
const modifyLoading = ref(false);
const onSubmit = async (formEl) => {

  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      ruleForm.value.bizTypeName = TypeOptions.value.find(el => el.typeCode === ruleForm.value.bizTypeCode).typeName
      modifyLoading.value = true;
      if (actionType.value === 'add') {
        api.flowTemplate.addFlowTemplate(unref(ruleForm))
          .then((res) => {
            ElMessage.success('新增成功!');
            console.log('res-data', res)
            emit('on-created', res);
            onCancel(formEl);
          })
          .finally(() => {
            modifyLoading.value = false;
          });
      } else if (actionType.value === 'edit') {
        api.flowTemplate.updateFlowTemplate(unref(ruleForm))
          .then((res) => {
            ElMessage.success('更新成功!');
            emit('on-updated');
            onCancel(formEl);
          })
          .finally(() => {
            modifyLoading.value = false;
          });
      }

    } else {
      console.log('error submit!', fields);
    }
  });
};
const resetForm = () => {
  ruleForm.value = {
    templateName: '',
    bizTypeCode: '',
    bizTypeName: '',
    id: null
  }
  nextTick(() => {
    ruleFormRef.value.clearValidate()
  })
};
const onCancel = () => {
  resetForm()
  dialogFormVisible.value = false;
}
defineExpose({
  initDialog,
});
</script>

<template>
  <el-dialog v-model="dialogFormVisible" :close-on-click-modal="false" :show-close="false"
             :title="title" width="30%">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80px">
      <el-form-item label="模板名称" prop="templateName">
        <el-input v-model.trim="ruleForm.templateName" autocomplete="off" maxlength="20"/>
      </el-form-item>
      <el-form-item label="业务类型" prop="bizTypeCode">
        <el-select v-model="ruleForm.bizTypeCode" :disabled="actionType === 'edit'" placeholder="请选择业务类型"
                   style="width: 100%;">
          <el-option v-for="item in TypeOptions" :key="item.typeCode" :label="item.typeName"
                     :value="item.typeCode"/>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onCancel">关闭</el-button>
        <el-button :loading="modifyLoading" type="primary" @click="onSubmit(ruleFormRef)">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>

</style>
